<script lang="ts" setup>
const msg = 'Hello'
const name = '<button>vue</button>'
</script>

<template>
  <!-- 普通写法 -->
  <p>标签内容</p>
  <!-- v-text 和 v-html 无标签写法显示内容一致-->
  <p v-text="msg"></p>
  <p v-html="msg"></p>
  <!-- 
  v-text 和 v-html 有标签写法显示内容不一致 
   v-text 会把标签内容替换掉
   v-html 会把标签内容保留
   -->
   <!-- v-text 往标签中插入文本内容，类似插值表达式 -->
  <p v-text="name"></p>
  <!-- v-html 解析并显示HTML格式的文本，常用于渲染富文本 -->
  <p v-html="name"></p>

  <!-- 插值表达式 -->
  <p>{{ msg }} {{ name }}</p>

  <!-- 
  使用频率 
   1. 插值表达式
   2. v-html  显示富文本
   3. v-text  显示纯文本
   -->
 
</template>

<style scoped>

</style>